<script setup lang="ts">
import { defineAsyncComponent, ref } from "vue";
import BoxBlock from "../components/boxBlock.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const bulkLineChart = defineAsyncComponent(
  () => import("../components/bulkLineChart.vue")
);
const BulkBarChart = defineAsyncComponent(
  () => import("../components/bulkBarChart.vue")
);

const tableData: any = ref([]);

const getData = () => {
  tableData.value = [
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
    {
      time: "2023-11-01",
      type: "停车",
      moeny: "3",
    },
  ];
};
getData();
</script>
<template>
  <div class="flex flex-col">
    <BoxBlock class="h-1/3" title="收款金额横向对比">
      <bulkLineChart />
    </BoxBlock>
    <BoxBlock class="h-1/3" title="收款金额月度汇总">
      <BulkBarChart />
    </BoxBlock>
    <BoxBlock class="h-1/3" title="实时订单信息">
      <div class="flex justify-between text-2xl">
        <div class="w-30">日期</div>
        <div class="w-30 text-center">收费类型</div>
        <div>收费金额</div>
      </div>
      <vue3-seamless-scroll
        class="seamless"
        :list="tableData"
        :hover="true"
        :step="0.3"
        :wheel="true"
        :isWatch="true"
      >
        <div
          class="flex justify-between"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <p class="w-30">{{ item.time }}</p>
          <p class="w-30 text-left">{{ item.type }}</p>
          <p class="text-left w-20">
            <span class="text-blue-400 text-xl">{{ item.moeny }}</span
            >元
          </p>
        </div>
      </vue3-seamless-scroll></BoxBlock
    >
  </div>
</template>
<style scoped lang="less">
.seamless {
  width: 100%;
  height: 220px;
  overflow: hidden;
}
</style>
